<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Ireland Candidates</title>
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="schema.js" type="application/json" rel="exhibit/data" />
    <link href="candidates-latlong.js" type="application/json" rel="exhibit/data" />
    
    <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>
    
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=ABQIAAAA5JLLfCE9c7HAtg25QM2KCRRyiP6mHEsQpwvxB19-hS9Kgd8RYhSXEtJVAXDUCZPqwtZZi7-HUYUYrw"></script>

    <link rel='stylesheet' href='styles.css' type='text/css' />
  </head>

  <body>
    
    <div ex:role="collection" ex:itemTypes="Item"></div>
    <table id="frame">
        <tr>
            <td id="sidebar">
                <h1>Ireland Elections 2011 Candidates</h1>
                
                <div id="exhibit-browse-panel">
                    <b>Search:</b>
                    <div ex:role="facet" ex:facetClass="TextSearch"></div>
                    <hr/>
                    <div ex:role="facet" ex:expression=".party" ex:facetLabel="Political Parties" ex:height="10em" ex:colorCoder="party-colors"></div>
                    <div ex:role="facet" ex:expression=".constituency" ex:facetLabel="Constituency" ex:height="10em"></div>
                </div>
            </td>
            <td id="content">
                <div ex:role="coder" ex:coderClass="Color" id="party-colors" style="display: none;">
                    <span ex:color="#800000">Christian Solidarity Party</span>
                    <span ex:color="#f00">Fianna Fáil</span>
                    <span ex:color="#808000">Fine Gael</span>
                    <span ex:color="#ff0">Green Party</span>
                    <span ex:color="#008000">Independent</span>
                    <span ex:color="#0f0">Labour</span>
                    <span ex:color="#008080">People Before Profit</span>
                    <span ex:color="#0ff">Sinn Féin</span>
                    <span ex:color="#000080">Socialist Party</span>
                    <span ex:color="#00f">South Kerry Independent Alliance</span>
                    <span ex:color="#800080">Workers and Unemployed Action Group South Tipperary</span>
                    <span ex:color="#f0f">Workers' Party</span>
                    
                    <span ex:case="others"  ex:color="#aaa">Other parties</span>
                    <span ex:case="mixed"   ex:color="#eee">Many parties</span>
                    <span ex:case="missing" ex:color="#444">No party</span>
                </div>
                
<!--                 <div ex:role="coder" ex:coderClass="ColorGradient" id="party-colors"-->
<!--                   ex:gradientPoints="-40, #000088; 0, #ffffff; 50, #ff0000"></div>-->

                <div class="item" ex:role="lens" style="display: none;">
                    <table cellpadding="10" width="100%">
                        <tr>
                            <td width="1"><img ex:src-content=".image_url" /></td>
                            <td>
                                <a ex:href-content=".website"><span ex:content=".label" /></a>
                                <div><span ex:content=".party"></span></div>
                                <div>Constituency: <span ex:content=".constituency"></span></div>
                                <div ex:control="item-link"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div ex:role="coordinator" id="item"></div>
                
                    
                <div ex:role="viewPanel" ex:initialView="0">
                    <div class="map-lens" ex:role="lens" style="display: none;">
                        <div><img ex:src-content=".image_url" /></div>
                        <span ex:content=".label"></span><br/>
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Map"
                        ex:label="Candidate Places with Photos"
                        ex:latlng=".LatLng"
                        ex:center="53.00, -8.50"
                        ex:zoom="6"
                        ex:bubbleWidth="200"
                        ex:icon=".image_url"
                        ex:shapeWidth="60"
                        ex:shapeHeight="60"
                        ex:selectCoordinator="item"
                        >
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Map"
                        ex:label="Candidate Places (by Party)"
                        ex:latlng=".LatLng"
                        ex:center="53.00, -8.50"
                        ex:zoom="6"
                        ex:bubbleWidth="200"
                        ex:colorKey=".party"
                        ex:colorCoder="party-colors"
                        ex:selectCoordinator="item"
                        >
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Tabular"
                        ex:label="Details"
                        ex:columns=".label, .party, .constituency, .website, .twitter, .facebook, .email, .phone"
                        ex:columnLabels="name, party, constituency, website, twitter, facebook, email, phone"
                        ex:formats="date { mode: medium; show: date }"
                        ex:sortColumn="3"
                        ex:sortAscending="false"
                        ex:paginate="true"
                        ex:pageSize="5"
                        >
                        <table style="display: none;">
                            <tr ex:background-style-content="'white'">
                                <td><b ex:content=".label"></b><br/><img ex:src-content=".image_url" /></td>
                                <td><span ex:content=".party"></span></td>
                                <td><span ex:content=".constituency"></span></td>
                                <td><a ex:href-content=".website" target="_blank"><span ex:content=".website"></span></td>
                                <td><a ex:href-content=".twitter" target="_blank"><span ex:content=".twitter"></span></td>
                                <td><a ex:href-content=".facebook" target="_blank"><span ex:content=".facebook"></span></td>
                                <td><a ex:href-subcontent="mailto:{{.email}}" ex:content=".email"></a></td>
                                <td><span ex:content=".phone"></span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
  </body>
</html>
